﻿<div ng-app="App" ng-controller="jsonController">
    <form id="data_table" action="/Home/DeleteData" method="post">
        <p style="margin: 10px 0;">
            <input type="button" class="btn btn-primary" id="btnAdd" value="添加" />
            <input type="button" class="btn btn-danger" id="btnDel" value="删除" disabled />
            @*<input type="button" class="btn btn-default" id="btn_dialog2" value="对话框2" />*@
        </p>
        @*<p><label for="f_pn" class="control-label">筛选</label><input type="text" id="f_pn" class="form-control" placeholder="姓名" ng-model="f_pn" /></p>*@
        <div id="loading" class="alert alert-info" style="display: none;">正在加载数据...</div>
        <table id="dataTable0" style="display: none;" class="defaultTable">
            <tr>
                <th><input type="checkbox" id="chkBox_checkAll" /></th>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>出生日期</th>
            </tr>
            @*<tr ng-repeat="x in datas | filter: { 'Name': f_pn }">
                <td><input type="checkbox" name="data_id" ng-value="x.ID" /></td>
                <td ng-bind="x.ID"></td>
                <td ng-bind="x.Name"></td>
                <td ng-bind="x.Sex"></td>
                <td ng-bind="x.Birthday | jsDate | date: 'yyyy/MM/dd'"></td>
            </tr>*@
        </table>
    </form>
</div>
<hr />
<div class="box">
    @*<span id="pageCount" style="margin-right: 20px;"></span>*@
    <span id="pageInfo" class="right-space"></span>
    <span class="right-space">
        <input type="button" id="btn-page-begin" value="首页" style="display: none;" />
        <input type="button" id="btn-page-prev" value="上一页" style="display: none;" />
        <input type="button" id="btn-page-next" value="下一页" style="display: none;" />
        <input type="button" id="btn-page-end" value="末页" style="display: none;" />
    </span>
    <span class="right-space">
        页数：
        <input type="text" id="targetPage" value="1" style="width: 30px;" />
        <input type="button" id="pageChange" value="跳转" />
    </span>
</div>
<div class="modal fade" id="dialog1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"><span class="glyphicon glyphicon-warning-sign"></span>&nbsp;警告</h4>
            </div>
            <div class="modal-body">确定要删除选中的数据吗？</div>
            <div class="modal-footer">
                <input type="button" id="btnDelOK" class="btn btn-danger" value="删除" />
                <input type="button" class="btn btn-default" value="取消" data-dismiss="modal" />
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="dialog2" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">编辑表单</h4>
                <div class="modal-body">
                    <p><input type="text" id="text1" class="form-control" /></p>
                    <p><input type="text" id="text2" class="form-control" /></p>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-primary" value="确定" />
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="pageIndex" value="@ViewBag.PageIndex" />
<script>
    var jsonData;
    var thisPage;
    var totalPage;

    //var currentPage = $("#pageIndex").val();
    $.ajax({
        type: "post",
        url: "/Home/Json1/",
        dataType: "json",
        beforeSend: function () {
            $("#loading").fadeIn(100);
        },
        success: function (data) {
            jsonData = data;//首先将源数据写入到全局变量
            showData(jsonData, 1);
            setTimeout(function () {
                //jQuery代码
                $("#loading").fadeOut(100);
                $("#dataTable0").css("display", "");
                //showPageInfo();
            }, 500);
        }
    });

    function showData(data, page) {
        var pageSize = 20;//每页显示记录数
        var beginIndex = pageSize * (page - 1);
        var endIndex = pageSize * page - 1;
        var count = 0;//记录总数
        $("tr[name='dataRow']").remove();
        $.each(data, function (index, item) {
            count++;//元素计数
            if (index < beginIndex || index > endIndex) {
                return true;//跳出当前循环
            }
            var tr = $("<tr name='dataRow'></tr>");
            var chkBox = $("<input type='checkbox' name='data_id' />").val(item.ID);
            tr.append($("<td></td>").append(chkBox));
            tr.append($("<td></td>").html(item.ID));
            tr.append($("<td></td>").html(item.Name));
            tr.append($("<td></td>").html(item.Sex));
            tr.append($("<td></td>").html(jsonDateFormat(item.Birthday)));
            $("#dataTable0").append(tr);
        });
        thisPage = page;
        totalPage = Math.ceil(count / pageSize);//总页数
        $("#pageInfo").html("共" + count + "条记录，当前第" + page + "页，共" + totalPage + "页");

        $("#btn-page-begin").css({
            display: (page > 1) ? "" : "none"
        });
        $("#btn-page-prev").css({
            display: (page > 1) ? "" : "none"
        });
        $("#btn-page-next").css({
            display: (page < totalPage) ? "" : "none"
        });
        $("#btn-page-end").css({
            display: (page < totalPage) ? "" : "none"
        });
    }

    //全局触发事件
    $(document).on({
        click: function () {
            //如果ID列的复选框全都不选，则禁用删除按钮
            var chkBox_id_checkedCount = $("input[name='data_id']:checked").length;
            $("#btnDel").prop({
                disabled: chkBox_id_checkedCount == 0
            });
        }
    });

    //全选按钮根据ID列的复选框的选中数量自动改变
    $("#dataTable0").on({
        click: function () {
            var chkBox_id_count = $("input[name='data_id']").length;
            var chkBox_id_checkedCount = $("input[name='data_id']:checked").length;
            $("#chkBox_checkAll").prop({
                checked: chkBox_id_count - chkBox_id_checkedCount == 0
            });
        }
    }, "input[name='data_id']");

    //“全选”按钮触发事件
    $("#chkBox_checkAll").on({
        click: function () {
            $("input[name='data_id']").prop({
                checked: this.checked
            });
        }
    });

    //“添加新记录”按钮触发事件
    $("#btnAdd").on({
        click: function () {
            window.location.href = "/Home/NewForm";
        }
    });

    //“删除”按钮触发事件
    $("#btnDel").on({
        click: function () {
            $("#dialog1").modal({
                backdrop: "static"
            });
        }
    });

    //“删除”按钮触发事件
    $("#btn_dialog2").on({
        click: function () {
            $("#dialog2").modal({
                backdrop: "static"
            });
        }
    });

    //“确认删除”按钮触发事件
    $("#btnDelOK").on({
        click: function () {
            data_table.submit();
        }
    });

    //“页面跳转”按钮触发事件
    $("#pageChange").on({
        click: function () {
            var targetPage = $("#targetPage").val();
            showData(jsonData, targetPage);
        }
    });

    $("#btn-page-begin").on({
        click: function () {
            showData(jsonData, 1);
        }
    });

    $("#btn-page-prev").on({
        click: function () {
            showData(jsonData, thisPage - 1);
        }
    });

    $("#btn-page-next").on({
        click: function () {
            showData(jsonData, thisPage + 1);
        }
    });

    $("#btn-page-end").on({
        click: function () {
            showData(jsonData, totalPage);
        }
    });

    //AngularJS
    //var currentPage = $("#pageIndex").val();
    //var app = angular.module('App', []);
    //app.controller('jsonController', function ($scope, $http) {
    //    $http.post("/Home/Json1/" + currentPage).success(function (response) {
    //        $scope.datas = response;

    //        setTimeout(function () {
    //            //jQuery代码
    //            $("#loading").fadeOut(300);
    //            $("#dataTable0").css("display", "");
    //            showPageInfo();
    //        }, 500);
    //    });
    //});

    //显示页数信息
    //function showPageInfo() {
    //    $.ajax({
    //        type: "GET",
    //        url: "/Home/PageCount",
    //        success: function (resp) {
    //            $("#pageCount").html(currentPage + "&nbsp;/&nbsp;" + resp);
    //        },
    //    });
    //}

    function jsonDateFormat(jsonDate) {
        //将时间戳转为int类型，构造Date类型
        var date = new Date(parseInt(jsonDate.substr(6)));
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var sMonth = (month < 10) ? ("0" + month) : month;
        var day = date.getDate();
        //日期为个位数时在前面+0
        var sDay = (day < 10) ? ("0" + day) : day;

        //getFullYear得到4位数的年份 ，返回一串字符串
        return year + "-" + sMonth + "-" + sDay;
    }

    //JSON时间格式化
    //app.filter("jsDate", function () {
    //    return function (x) {
    //        if (x != null) {
    //            return new Date(parseInt(x.substr(6)));
    //        }
    //    };
    //});
</script>